<template>
  <div class="category">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 添加分类按钮 -->
    <el-button type="primary" plain class="mb-15" @click='add'>添加分类</el-button>
    <!-- 分类表格 -->
    <tree-grid
      :treeStructure="true"
      :columns="columns"
      :data-source="dataSource"
      @deleteCate="deleteCategory"
      @editCate="editCategory">
    </tree-grid>
    <!-- 分页器 -->
    <el-pagination
      class="page"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagenum"
      :page-sizes="[ 10, 20,30, 40]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalNum">
    </el-pagination>
    <!-- 新增分类弹框 -->
    <el-dialog title="新增分类" :visible.sync="AddDialogFormVisible">
      <el-form :model="addform" :rules='rules'>
        <el-form-item label="分类名称" :label-width="formLabelWidth" prop="cat_name">
          <el-input v-model="addform.cat_name" auto-complete="off"></el-input>
        </el-form-item>
        <!-- 联动选择器 -->
        <el-form-item label="父级名称" :label-width="formLabelWidth"  >
          <el-cascader
            placeholder="默认一级目录"
            :props="props"
            :options="options"
            v-model="selectedOptions"
            @change="handleChange"
            change-on-select>
          </el-cascader>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="AddDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitAdd">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import TreeGrid from "@/components/TreeGrid/TreeGrid";
  import { getCategoryList, addCategory, delCategory } from "@/api";
  export default {
    data() {
      return {
        // 级联选择的数据
        selectedOptions: [],
        // 级联选择器的数据源
        options: [],
        // props属性  配置
        props: {
          value: "cat_id",
          children: "children",
          label: "cat_name"
        },
        formLabelWidth: "120px",
        // 新增的数据
        addform: {
          // 默认是最高级
          // id=val
          cat_pid: 0,
          cat_name: "",
          cat_level: 0
        },
        // 新增弹框显示隐藏
        AddDialogFormVisible: false,
        // 分页需要的的属性值
        totalNum: 0,
        pagesize: 10,
        pagenum: 1,
        // 列的属性
        columns: [
          {
            text: "分类名称",
            dataIndex: "cat_name",
            width: ""
          },
          {
            text: "是否有效",
            dataIndex: "cat_deleted",
            width: ""
          },
          {
            text: "排序",
            dataIndex: "cat_level",
            width: ""
          }
        ],
        // 数据源=--列表数据
        dataSource: [],
        // 表单校验
        rules: {
          cat_name: [
            { required: true, message: "请输入分类名称", trigger: "blur" }
          ]
        }
      };
    },
    // 添加子组件  tree-grid
    components: {
      TreeGrid
    },
    created() {
      this.initList();
    },
    methods: {
      //  删除商品分类 | 商品分类id
      deleteCategory(cid) {
        console.log(cid);
        // 删除确认框
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            delCategory(cid).then(res => {
              console.log(res);
              if (res.meta.status === 200) {
                this.$message.success("删除成功");
                this.initList();
              }
            });
          })
          .catch(() => {
            this.$message.info("已取消删除");
          });
      },
      //  编辑商品分类 | 商品分类id
      editCategory(cid) {
        console.log(cid);
      },
      // 初始化商品分类数据
      initList() {
        getCategoryList({
          type: 3,
          pagenum: this.pagenum,
          pagesize: this.pagesize
        }).then(res => {
          console.log(res, "分类商品数据");
          if (res.meta.status === 200) {
            this.totalNum = res.data.total;
            this.dataSource = res.data.result;
          }
        });
      },
      // 分页器的两个回调
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pagesize = val;
        this.initList();
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pagenum = val;
        this.initList();
      },
      // 级联的回调 ===>判断选择的是哪一级分类
      handleChange(value) {
        console.log(value);
        this.addform.cat_pid = value[value.length - 1];
        this.addform.cat_level = value.length;
      },
      // 展示添加商品分类弹框
      add() {
        this.AddDialogFormVisible = true;
        this.addform.cat_name = "";
        getCategoryList({
          type: 2
        }).then(res => {
          console.log(res, "二级分类商品数据");
          this.options = res.data;
        });
      },
      // 添加商品分类
      submitAdd() {
        addCategory(this.addform).then(res => {
          console.log(res, "添加一级商品分类");
          if (res.meta.status === 201) {
            this.AddDialogFormVisible = false;
            this.$message.success("添加分类成功");
            this.initList();
          } else {
            this.$message.error(res.meta.msg);
          }
        });
      }
    }
  };
</script>
